import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    Modal,
    ScrollView
} from 'react-native';

import ScrollableTabView, { BadgedTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view'
import ImageViewer from 'react-native-image-zoom-viewer'
import Sound from 'react-native-sound'

import Constant from '../Constant/Constant'
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import RouterUtils from '../Utils/RouterUtils'
import StorageUtils from '../Utils/StorageUtils'
import TimeUtils from '../Utils/TimeUtils'

export default class PageKsczDetail extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: navigation.state.params.title,
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            id: this.props.navigation.state.params.id,
            processInstanceId: this.props.navigation.state.params.processInstanceId,
            caseDetail: {},
            caseFlow: [],
            status: this.props.navigation.state.params.status,
            imgsZoomIndex: 0,
            imgsModalVisible: false,
            imgsPhotoImgs: []
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('PageWtsbDetail', this.props.navigation.state.key);
        this.getCaseDetail();
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('PageWtsbDetail', this.props.navigation.state.key);
    }

    onChangeTabs(obj)
    {
    }

    getCaseDetail()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.caseDetail + '?id=' + that.state.id, session, function (resultcode, data)
                    {
                        var pics = data.picReport.split(',');
                        for (let i = 0; i < pics.length; i++)
                        {
                            that.state.imgsPhotoImgs.push({'url': pics[i]});
                        }
                        that.setState({
                            caseDetail: data,
                            caseFlow: data.timeLineList
                        })
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    jumpLocation()
    {
        this.props.navigation.navigate('WebPage', {'title': '案件位置', 'url': Constant.mapServer + '?type=daka&isShow=false&lng=' + this.state.caseDetail.geo.split(',')[0] + '&lat=' + this.state.caseDetail.geo.split(',')[1]})
    }

    jumpVoicePlay(playUrl)
    {
        if (!playUrl.endsWith('.mp3'))
        {
            ToastUtils.toastShortCenter('音频格式有误');
            return;
        }
        ToastUtils.toastShortCenter('录音开始播放')
        console.log('playUrl:' + playUrl)
        let whoosh = new Sound(playUrl, '', err =>
        {
            if (err)
            {
                return console.log(err)
            }
            whoosh.play(success =>
            {
                if (success)
                {
                    ToastUtils.toastShortCenter('录音播放结束')
                } else
                {
                    ToastUtils.toastShortCenter('录音播放失败')
                }
            })
        })
    }

    showImgsPhotoZoomerView(photoZoomerIndex, photoImgs)
    {
        this.setState({
            imgsZoomIndex: photoZoomerIndex,
            imgsModalVisible: true
        });
    }

    hideImgsPhotoZoomerView()
    {
        this.setState({
            imgsModalVisible: false
        });
    }

    renderHandlePics(handleImgs)
    {
        if (handleImgs != null)
        {
            var handleImgArrays = [];
            var pics = handleImgs.split(',');
            for (let i = 0; i < pics.length; i++)
            {
                handleImgArrays.push({'url': pics[i]});
            }
            let allData = [];
            for (let i = 0; i < handleImgArrays.length; i++)
            {
                let item = handleImgArrays[i];
                allData.push(
                    <TouchableOpacity key={item.url} activeOpacity={0.8} onPress={() => this.showImgsPhotoZoomerView(0, handleImgArrays)}>
                        <Image style={{width: 60, height: 60, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}}
                               source={{uri: item.url}}/>
                    </TouchableOpacity>
                );
            }
            return allData;
        }
    }

    renderDetailVoice()
    {
        if (this.state.caseDetail.audioReport != '')
        {
            return (
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpVoicePlay(this.state.caseDetail.audioReport)} style={{marginLeft: 8, width: 100, paddingLeft: 8, paddingRight: 8, paddingTop: 4, paddingBottom: 4, borderRadius: 4, backgroundColor: '#E9EDF0', flexDirection: 'row', alignItems: 'center'}}>
                    <Image resizeMode={Image.resizeMode.stretch} style={{width: 16, height: 15}} source={require('../img/voice_record.png')}/>
                    <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_12, color: ColorUtils.black}}>录音</Text>
                </TouchableOpacity>
            )
        } else
        {
            return (
                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>暂无录音</Text>
            )
        }
    }

    renderCaseDetail()
    {
        return (
            <View style={{padding: 16}}>
                <View>
                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件信息</Text>
                    <View style={{marginTop: 12, marginBottom: 8, height: 1, borderColor: ColorUtils.line, borderBottomWidth: 1}}/>
                    <View style={{flexDirection: 'row'}}>
                        <View style={{height: '100%', backgroundColor: ColorUtils.blue, width: 3}}/>
                        <View style={{marginLeft: 12, flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>上报时间:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.createTime}</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={{marginTop: 32}}>
                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件详情</Text>
                    <View style={{marginTop: 12, marginBottom: 8, height: 1, borderColor: ColorUtils.line, borderBottomWidth: 1}}/>
                    <View style={{flexDirection: 'row'}}>
                        <View style={{height: '100%', backgroundColor: ColorUtils.blue, width: 3}}/>
                        <View style={{marginLeft: 12, flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>举报人员:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.reportUser == '' ? '无' : this.state.caseDetail.reportUser}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>举报电话:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.reportPhone == '' ? '无' : this.state.caseDetail.reportPhone}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件状态:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: this.state.status == '未上报' ? ColorUtils.red : ColorUtils.light_blue}}>{RuleUtils.converState(this.state.caseDetail.state)}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件编号:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.caseNo}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件类型:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.categoryName}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件大类:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.categoryOneName}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件小类:</Text>
                                <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.categoryTwoName}</Text>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件位置:</Text>
                                <Text numberOfLines={1} style={{flex: 1, marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.caseDetail.geoDescript}</Text>
                                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpLocation()}>
                                    <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.blue}}>查看</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={{height: 30, flexDirection: 'row', alignItems: 'center'}}>
                                <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件录音:</Text>
                                {this.renderDetailVoice()}
                            </View>
                            <View style={{flexDirection: 'row', height: 80}}>
                                <View style={{height: 30, flexDirection: 'row', alignItems: 'center',}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>上报照片:</Text>
                                </View>
                                <Modal visible={this.state.imgsModalVisible} transparent={true} onRequestClose={() => this.setState({imgsModalVisible: false})}>
                                    <ImageViewer imageUrls={this.state.imgsPhotoImgs} enableSwipeDown={true} onSwipeDown={() =>
                                    {
                                        console.log('onSwipeDown');
                                    }} index={this.state.imgsZoomIndex} onClick={() => this.hideImgsPhotoZoomerView()}/>
                                </Modal>
                                <View style={{marginLeft: 8, flexDirection: 'row', alignItems: 'center',}}>
                                    {this.renderHandlePics(this.state.caseDetail.picReport)}
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', height: 80}}>
                                <View style={{height: 30, flexDirection: 'row', alignItems: 'center',}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>处理照片:</Text>
                                </View>
                                <Modal visible={this.state.imgsModalVisible} transparent={true} onRequestClose={() => this.setState({imgsModalVisible: false})}>
                                    <ImageViewer imageUrls={this.state.imgsPhotoImgs} enableSwipeDown={true} onSwipeDown={() =>
                                    {
                                        console.log('onSwipeDown');
                                    }} index={this.state.imgsZoomIndex} onClick={() => this.hideImgsPhotoZoomerView()}/>
                                </Modal>
                                <View style={{marginLeft: 8, flexDirection: 'row', alignItems: 'center',}}>
                                    {this.renderHandlePics(this.state.caseDetail.picProcess)}
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', height: 120, marginRight: 16}}>
                                <View style={{height: 30, flexDirection: 'row', alignItems: 'center',}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件描述:</Text>
                                </View>
                                <ScrollView style={{marginLeft: 8, flex: 1, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, padding: 8}}>
                                    <Text style={{fontSize: ScreenUtils.Font_12, color: ColorUtils.light_gray}}>{this.state.caseDetail.descript}</Text>
                                </ScrollView>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }

    renderCaseFlow()
    {
        let allData = [];
        allData.push(
            <View key={-1} style={{backgroundColor: ColorUtils.white, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingLeft: 8, paddingRight: 8, paddingTop: 16, paddingBottom: 24}}>
                <Text style={{textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_14}}>
                    时间
                </Text>
                <View style={{marginLeft: 6, flexDirection: 'column', justifyContent: 'center', backgroundColor: ColorUtils.white}}>
                    <View style={{width: 12, height: 12, backgroundColor: ColorUtils.white, borderWidth: 2, borderColor: ColorUtils.white, borderRadius: 30,}}/>
                </View>
                <Text style={{textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_14}}>
                    操作
                </Text>
                <Text style={{textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_14}}>
                    操作员
                </Text>
                <Text style={{textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_14}}>
                    结果
                </Text>
            </View>
        );

        for (let i = 0; i < this.state.caseFlow.length; i++)
        {
            let item = this.state.caseFlow[i];
            if (this.state.caseFlow.length == 1)
            {
                //只有1个
                allData.push(
                    <View key={i} style={{flexDirection: 'row', paddingLeft: 8, paddingRight: 8}}>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_12}}>
                            {item.startTime}
                        </Text>
                        <View style={{marginLeft: 6, flexDirection: 'column', justifyContent: 'center', backgroundColor: ColorUtils.white}}>
                            <View style={{width: 12, height: 12, backgroundColor: ColorUtils.white, borderWidth: 2, borderColor: ColorUtils.white, borderRadius: 30,}}/>
                            <View style={{marginLeft: 6, width: 1, height: 50, backgroundColor: ColorUtils.white}}/>
                        </View>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.black, fontSize: ScreenUtils.Font_12}}>
                            {item.nodeName}
                        </Text>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.black, fontSize: ScreenUtils.Font_12}}>
                            {item.taskUserName}
                        </Text>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.orange, fontSize: ScreenUtils.Font_12}}>
                            {item.ret != '' ? '已处理' : '未处理'}
                        </Text>
                    </View>
                );
            }
            else if (i == this.state.caseFlow.length - 1)
            {
                //最后一个
                allData.push(
                    <View key={i} style={{flexDirection: 'row', paddingLeft: 8, paddingRight: 8}}>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_12}}>
                            {item.startTime}
                        </Text>
                        <View style={{marginLeft: 6, flexDirection: 'column', justifyContent: 'center', backgroundColor: ColorUtils.white}}>
                            <View style={{width: 12, height: 12, backgroundColor: ColorUtils.white, borderWidth: 2, borderColor: ColorUtils.white, borderRadius: 30,}}/>
                            <View style={{marginLeft: 6, width: 1, height: 50, backgroundColor: ColorUtils.white}}/>
                        </View>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.black, fontSize: ScreenUtils.Font_12}}>
                            {item.nodeName}
                        </Text>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.black, fontSize: ScreenUtils.Font_12}}>
                            {item.taskUserName}
                        </Text>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.orange, fontSize: ScreenUtils.Font_12}}>
                            {item.ret != '' ? '已处理' : '未处理'}
                        </Text>
                    </View>
                );
            } else
            {
                allData.push(
                    <View key={i} style={{flexDirection: 'row', paddingLeft: 8, paddingRight: 8}}>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.light_gray, fontSize: ScreenUtils.Font_12}}>
                            {item.startTime}
                        </Text>
                        <View style={{marginLeft: 6, flexDirection: 'column', justifyContent: 'center', backgroundColor: ColorUtils.white}}>
                            <View style={{width: 12, height: 12, backgroundColor: ColorUtils.white, borderWidth: 2, borderColor: ColorUtils.white, borderRadius: 30,}}/>
                            <View style={{marginLeft: 6, width: 1, height: 50, backgroundColor: ColorUtils.white}}/>
                        </View>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.black, fontSize: ScreenUtils.Font_12}}>
                            {item.nodeName}
                        </Text>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.black, fontSize: ScreenUtils.Font_12}}>
                            {item.taskUserName}
                        </Text>
                        <Text style={{marginTop: -2, textAlign: 'center', flex: 1, color: ColorUtils.orange, fontSize: ScreenUtils.Font_12}}>
                            {item.ret != '' ? '已处理' : '未处理'}
                        </Text>
                    </View>
                );
            }
        }
        return allData;
    }

    render()
    {
        return (
            <View style={styles.container}>
                <ScrollableTabView
                    locked={true}
                    renderTabBar={() => <DefaultTabBar style={{flexDirection: 'row', borderBottomWidth: 0, paddingBottom: 3, height: 45}}/>}
                    onChangeTab={this.onChangeTabs.bind(this)}
                    tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
                    tabBarTextStyle={styles.tabBarTextStyle}
                    tabBarBackgroundColor={ColorUtils.white}
                    tabBarInactiveTextColor={ColorUtils.black}
                    tabBarActiveTextColor={ColorUtils.blue}>
                    <ScrollView tabLabel='案件详情'>
                        {this.renderCaseDetail()}
                    </ScrollView>
                    <ScrollView tabLabel={'案件流程'}>
                        {this.renderCaseFlow()}
                    </ScrollView>
                </ScrollableTabView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
    tabBarUnderlineStyle: {
        height: 2,
        minWidth: Math.floor(ScreenUtils.width * 0.8 / 8),
        backgroundColor: ColorUtils.blue,
    },
    tabBarTextStyle: {
        fontSize: ScreenUtils.Font_14,
        fontWeight: 'normal'
    }
});





